<template>
  <view class="help-container">
    <scroll-view class="title-bar" scroll-x="true" @scroll="scroll">
      <text
        v-for="(item, index) in titleList"
        :key="index"
        @tap="
          () => {
            currentIndex = index;
          }
        "
        >{{ item }}</text
      >
    </scroll-view>



    <view class="list">
      <swiper class="swiper" :current="currentIndex">
          <swiper-item
            class="swiper-item"
            v-for="(helps, index) in helpList"
            :key="index"
          >
            <view class="empty" v-if="!helpList[index] || (helpList[index] && helpList[index].length === 0)">
              无数据
            </view>

            <view class="helps-wrap">
              <view class="help-item" v-for="(help, i) in helps" :key="i">
                <view class="help-title">
                  {{ help }}
                  <view class="icon">></view>
                </view>
              </view>
            </view>


          </swiper-item>
      </swiper>
    </view>



  </view>
</template>

<script>
export default {
  data() {
    return {
      scrollTop: 0,
      old: {
        scrollTop: 0,
      },
      titleList: [
        "个人简介",
        "哈哈哈哈",
        "日日日日",
        "哇哇哇哇",
        "零零六年",
        "怕怕怕怕",
      ],
      helpList: {
        0: [
          "第1条帮助问题",
          "第2条帮助问题",
          "第3条帮助问题",
          "第2条帮助问题",
          "第3条帮助问题",
          "第2条帮助问题",
          "第3条帮助问题",
          "第2条帮助问题",
          "第3条帮助问题",
          "第2条帮助问题",
          "第3条帮助问题",
          "第2条帮助问题",
          "第3条帮助问题",
          "第2条帮助问题",
          "第3条帮助问题",
          "第2条帮助问题",
          "第3条帮助问题",
          "第2条帮助问题",
          "第3条帮助问题",
          "第2条帮助问题",
          "第3条帮助问题",
          "第2条帮助问题",
          "第3条帮助问题",
          "第2条帮助问题",
          "第3条帮助问题",
          "第2条帮助问题",
          "第3条帮助问题",
          "第2条帮助问题",
          "第3条帮助问题",
          "第2条帮助问题",
          "第3条帮助问题",
          "第2条帮助问题",
          "第3条帮助问题",
          "第2条帮助问题",
          "第3条帮助问题",
          "第2条帮助问题",
          "第3条帮助问题",
        ],
        1: ["第1条帮助问题asdf", "第2条帮助问题asdf", "第3条帮助问题sdf"],
        2: ["第1条帮助问题65867", "第2条帮助问题578567", "第3条帮助问题56786"],
        4: [],
        5: [],
        6: [],
      },
      currentIndex: 0,
    };
  },
  methods: {
    upper: function (e) {
      // console.log(e);
    },
    lower: function (e) {
      // console.log(e);
    },
    scroll: function (e) {
      // console.log(e.detail.scrollTop);
      this.old.scrollTop = e.detail.scrollTop;
    },
    goTop: function (e) {
      this.scrollTop = this.old.scrollTop;
      this.$nextTick(function () {
        this.scrollTop = 0;
      });
      uni.showToast({
        icon: "none",
        title: "纵向滚动 scrollTop 值已被修改为 0",
      });
    },
  },
};
</script>

<style>
page {
  background-color: #f3f3f3;
}
.help-container {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}
.title-bar {
  background-color: rgb(255, 207, 102);
  height: 100rpx;
  width: 100%;
  white-space: nowrap;
}
.title-bar text {
  display: inline-block;
  text-align: center;
  line-height: 100rpx;
  width: 200rpx;
  /* background-color: coral; */
  margin: 0 10rpx;
  font-size: 34rpx;
  font-weight: bold;
}
.list {
  height: calc(100vh - 100rpx - constant(safe-area-inset-bottom));
  height: calc(100vh - 100rpx - env(safe-area-inset-bottom));
  padding: 20rpx 0 0;
  box-sizing: border-box;
}
.list .swiper {
  height: 100%;
  }

.swiper-item {
  padding: 0 20rpx;
  box-sizing: border-box;
  /* margin: 0 20rpx; */
}
.helps-wrap{
  overflow: auto;
  border-radius: 20rpx;
  height: 100%;
    /* padding: 0 20rpx; */

}

  .help-item{
    padding: 0 20rpx;
    /* box-sizing: border-box; */
    font-size: 30rpx;
    background-color: #fff;
    color: #333;
  }
  .help-item:last-child{
  /* border-radius: 20rpx; */
  border-bottom-left-radius: 20rpx;
  border-bottom-right-radius: 20rpx;
  }
  .help-title{
    padding: 10rpx 0;
    border-bottom: 1rpx solid #eee;
  }
  .help-item:last-child .help-title{
    border: none;
  }
  .icon{
    float: right;
    padding-right: 10rpx;
  }
</style>


